<html>
<head>
	<title>ColorPicker Test</title>
	<script src="libs/vue.js"></script>
	<script type="module">
		import ColorPicker from "/scripts/colorpicker.js"
    
    let testdata = {
      colors: ["red", "orange", "yellow", "green", "blue", "black", "gray", "magenta", "purple", "brown"],
      onchange: function(newcol) {console.log("Updated to " + newcol)},
      gapRatio: 0.2,
      showIndicator: true
    }
    
    Vue.createApp({
      data() {
        return {testdata}
      },
      components: {
        ColorPicker
      }
    }).mount("#root")
	</script>
</head>
<body>
<div id="root">
	<color-picker v-bind="testdata"></color-picker>
</div>
</body>
</html>